<template>
  <div class="app-container" v-loading="pageLoading">
    <!-- <el-button type="primary" class="fr" @click="createItem">创建</el-button> -->
    <div class="filter-container">
      <el-date-picker class="filter-item" style="width: 330px" v-model="query.queryString.daterange"
        type="datetimerange" format="yyyy-MM-dd HH:mm" :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="采集时间" end-placeholder="截至时间"
        :picker-options="pickerOptions">
      </el-date-picker>
      <el-input class="filter-item" style="width: 230px" clearable v-model="query.queryString.mo" placeholder="工单">
      </el-input>
      <el-input class="filter-item" style="width: 230px" clearable v-model="query.queryString.sn" placeholder="料号">
      </el-input>
      <el-select class="filter-item" style="width: 230px" v-model="query.queryString.vendor" placeholder="供应商"
        filterable clearable>
        <el-option v-for="(item, index) in options.vendor" :key="index"
          :label="`${item.vendor_code} ${item.vendor_name}`" :value="item.id">
        </el-option>
      </el-select>
      <el-input class="filter-item" style="width: 230px" clearable v-model="query.queryString.others"
        placeholder="物料名/扫描序号"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns"> </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'mokpsReport',
  data: function () {
    return {
      api: this.$api.mokpsReport,
      apiList: this.$api.mokpsReport,
      name: '工单物料采集',
      columns: [
        { title: '工单号', key: 'mo_no', width: 160 },
        { title: '物料号', key: 'key_part_no', width: 160 },
        { title: '物料名称', key: 'key_part_name', width: 200 },
        { title: '机台编号', key: 'machine_code', width: 200 },
        { title: '机台名称', key: 'machine_name', width: 200 },
        { title: '供应商代码', key: 'vendor_code', width: 120 },
        { title: '供应商', key: 'vendor_name', width: 140 },
        { title: '日期码', key: 'date_code', width: 120 },
        { title: '批次', key: 'lot_sn', width: 120 },
        { title: '数量', key: 'qty', width: 70 },
        { title: '扫描条码内容', key: 'barcode', minWidth: 160 },
        { title: '操作人', key: 'create_user', width: 140 },
        { title: '操作时间', key: 'create_time', width: 140 },
      ],
      fields: [],
      query: {
        queryString: {
          daterange: [],
        },
        page: 1,
        size: 10,
      },
      tableProps: {
        hideOperations: true,
        border: true,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      options: {
        vendor: [],
      },
    }
  },
  methods: {},
  created: function () {
    this.getList()
    this.$request(this.$api.vendor + 'getlist', { page: 1, size: 10 }).then((r) => {
      console.info(r)
      this.options.vendor = r.list
    })
  },
}
</script>
<style scoped>
</style>





